import React from 'react';
import { Flex, Layout } from 'antd';
import { AntdRegistry } from '@ant-design/nextjs-registry';
import { Content, Footer, Header } from 'antd/es/layout/layout';
import Sider from 'antd/es/layout/Sider';
import styles from './page.module.scss';
import './global.scss'

export default function RootLayout({ children }: React.PropsWithChildren) {

  return (
    <html lang="en">
      <body>
        <AntdRegistry>
          <Flex>
            <Layout className={styles.layoutStyle}>
                <Header className={styles.headerStyle}>Header</Header>
              <Sider className={styles.siderStyle}>
                Sider
              </Sider>
              <Layout>
                <Content className={styles.contentStyle}>{children}</Content>
                <Footer className={styles.footerStyle}>Footer</Footer>
              </Layout>
            </Layout>
          </Flex>
        </AntdRegistry>
      </body>
    </html >
  );
}